<template>
  <div>
    <el-main>
      <!--    条件搜索      -->
      <el-form :inline="true" :model="queryCategoryVo" class="demo-form-inline" style="float: left;display: block">
        <el-form-item label="类名">
          <el-input v-model="queryCategoryVo.name" placeholder="类名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!--     按钮     -->
      <div style="float: right;display: block;width: 100%;text-align: left">

        <el-button type="primary" @click="addCategory('add')" plain style="margin-right: 10px">新增+
          <li class="el-icon-plus"></li>
        </el-button>
        <el-button type="danger" @click="deleteBatch" plain style="margin-right: 20px">批量删除
          <li class="el-icon-delete"></li>
        </el-button>
        <!--
                <el-upload
                    action="http://localhost:8081/yum/category/import"
                    :headers="headerObj"
                    multiple
                    :limit="3"
                    :on-success="uploadSuccess"
                    :show-file-list="false"
                    style="display: inline-block;margin-right: 20px">
                  <el-button type="info" plain>上传
                    <li class="el-icon-upload2"></li>
                  </el-button>
                </el-upload>
        
        
        
                <el-button type="warning" @click="exportFile" plain>下载
                  <li class="el-icon-download"></li>
                </el-button>
        
        
        -->
      </div>

      <!--    内容     -->
      <el-table
          ref="multipleTable"
          :data="tableData"

          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column

            prop="name"
            label="分类名称"
            width="100"
            align="center">
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序"
            width="100"
            align="center">
        </el-table-column>


        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页栏-->
      <div style="margin-top: 30px;text-align: center">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.queryCategoryVo.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="this.queryCategoryVo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
        </el-pagination>
      </div>

      <!--      修改新增弹窗-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="category">
          <el-form-item label="种类名" :label-width="formLabelWidth">
            <el-input v-model="category.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="category.sort" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitCategory">提 交</el-button>
        </div>
      </el-dialog>
    </el-main>
  </div>


</template>

<script>

export default {
  name: "CategoryView",
  created() {
    this.loadData();
  },
  data() {
    return {
      tableData: [],
      currentPage1: 5,
      queryCategoryVo: {
        currentPage: 1,
        pageSize: 10,
        name: '',
        type: "",
        sort: ''
      },
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      category: {},
      ids: [],
      multipleSelection: [],
      op: '',
      title: '新增分类',
      disable: false,
      headerObj: {
        Authorization: window.localStorage.getItem("Authorization")
      }
    }
  },
  methods: {
    resetData(){
      this.category = {
        id: "",
        name: '',
        sort: '',
        type: '',
      }
      this.dialogFormVisible = false
    },

    deleteBatch(){

      if (this.ids.length){
        this.removeMethod()
        // this.loadData()
      }
    },

    handleSelectionChange(val) {
      this.ids = []
      let _this = this
      val.forEach(function (category) {
        _this.ids.push(category.id)
      })
      console.log(this.ids)
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      console.log("toggle:", rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.category = {
        id: row.id,
        name:row.name,
        sort:row.sort,
      }
      this.dialogFormVisible = true
      this.title = "修改信息"
      this.op = 'edit'
      this.disable = true
      // 编程式路由来进行组件跳转
      //this.$router.push({path: '/saveOrUpdate/' + row, replace: true})
    },
    handleDelete(index, row) {
      this.ids = []
      this.ids.push(row.id)
      this.removeMethod()
    },

    removeMethod() {
      this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除请求发送
        this.$axios.get(
            '/category/remove?ids=' + this.ids
        ).then((response) => {
          if (response.data.result) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loadData();
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        }).catch((reason) => {
          this.ids=[]
          console.log(reason)
        })
        this.ids = []
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }).finally(()=>{
        this.ids = []
      });
    },

    handleSizeChange(val) {
      this.queryCategoryVo.pageSize = val
      this.loadData()
    }
    ,
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryCategoryVo.currentPage = val
      this.loadData()
    },
    loadData() {
      let _this = this
      this.$axios.post("/category/queryAll", this.queryCategoryVo).then(
          function (response) {
            if (response.data.result){
              console.log(_this.tableData = response.data.data.pageInfo.list)
              _this.tableData = response.data.data.pageInfo.list
              _this.total = response.data.data.pageInfo.total
            }else {
              _this.$message.error(response.data.message)
            }
          }
      )
    }
    ,
    submitCategory(){
      let path = ''
      if (this.op =='add'){
        path = "/category/add"
      }else {
        path = "/category/update"
      }
      let _this = this
      this.axios.post(path, this.category).then(response => {
        console.log(response)
        if (response.data.result) {
          _this.$message.success(response.data.message);
          _this.loadData()
        } else {
          _this.$message.error(response.data.message);
        }
      })
      this.resetData()
    },
    onSubmit() {
      console.log(1111)
      this.loadData()
    },
    addCategory(op) {
      this.op = op
      this.title = '新增分类'
      this.dialogFormVisible = true
      this.disable = false
    },
    isOpen(row){
      console.log(row)
      return true
    },
  }
 }

</script>

<style scoped>

</style>